import { View, Text } from '@tarojs/components';
import classnames from 'classnames';
import { useEffect, useState } from 'react';
import './index.scss';

interface IProps {
  checked: boolean;
  value: string | number;
  onChange: (value: string | number) => void;
  children?: any;
}

export default function ({ checked, value, onChange, children }: IProps) {
  const [_checked, setChecked] = useState(checked);

  useEffect(() => {
    setChecked(checked);
  }, [checked]);

  return (
    <View className="radio-component" onClick={() => onChange(value)}>
      <Text
        className={classnames('iconfont', _checked ? 'icon-radio-selected' : 'icon-unselect')}
      ></Text>
      {children}
    </View>
  );
}
